<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebUSB API Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #device-list {
            margin-top: 20px;
        }
        .log {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <h1>WebUSB API Example</h1>
    <button id="request-device-button">Request USB Device</button>
    <div id="device-list"></div>
    <div class="log" id="log"></div>

    <script>
        const logElement = document.getElementById('log');

        function log(message) {
            const p = document.createElement('p');
            p.textContent = message;
            logElement.appendChild(p);
            console.log(message);
        }

        document.getElementById('request-device-button').addEventListener('click', async () => {
            try {
                // Request a device with specific vendor and product ID
                // For demonstration purposes, you can specify filters like this:
                // { vendorId: 0xXXXX, productId: 0xYYYY }
                const device = await navigator.usb.requestDevice({ filters: [] });
                log(`Device selected: Vendor ID: ${device.vendorId}, Product ID: ${device.productId}`);

                // Open the device
                await device.open();
                log('Device opened successfully.');

                // Select the configuration to use
                if (device.configuration === null) {
                    await device.selectConfiguration(1);
                    log('Configuration selected.');
                } else {
                    log('Device already configured.');
                }

                // Claim an interface on the device
                await device.claimInterface(0);
                log('Interface claimed successfully.');

                // Read data from the device
                const result = await device.transferIn(5, 64); // Endpoint number, packet size
                log(`Data read from device: ${new TextDecoder().decode(result.data)}`);

                // Write data to the device
                const data = new TextEncoder().encode('Hello USB');
                await device.transferOut(3, data); // Endpoint number, data
                log('Data written to device successfully.');

                // Release the interface when done
                await device.releaseInterface(0);
                log('Interface released.');

                // Close the device connection
                device.close();
                log('Device closed.');
            } catch (error) {
                log(`Error: ${error.message}`);
            }
        });

        // List all connected USB devices
        async function listDevices() {
            const devices = await navigator.usb.getDevices();
            const deviceListElement = document.getElementById('device-list');
            deviceListElement.innerHTML = '';

            if (devices.length === 0) {
                deviceListElement.textContent = 'No USB devices found.';
            } else {
                devices.forEach((device) => {
                    const div = document.createElement('div');
                    div.textContent = `Vendor ID: ${device.vendorId}, Product ID: ${device.productId}`;
                    deviceListElement.appendChild(div);
                });
            }
        }

        // Call listDevices when the page loads
        window.addEventListener('load', listDevices);
    </script>
</body>
</html>



